<template>
    <div class="login">
      <h3 class="login-header">欢迎使用趣多多</h3>
      <p v-show="showTishi" style="color: red">{{tishi}}</p>
      <hr style="margin-top: 23px;margin-left: 23px;"/>
      <br/>
      <div class="login-input">
        <div class="iconfont">&#xe61b;</div>
      <input type="text" placeholder="请输入用户名" class="login-input-content" v-model="username">
        <br/>
        <div class="iconfont">&#xe6a8;</div>
      <input type="password" placeholder="请输入密码" class="login-input-content" v-model="password">
      </div>
      <br/>
      <div class="login-code">
        <div class="iconfont">&#xe6bf;</div>
        <input type="text" v-model="code" class="code"  placeholder="请输入验证码" />
        <div class="captcha" @click="refreshCode">
          <!--验证码组件-->
          <s-identify :identifyCode="identifyCode"></s-identify>
        </div>
      </div>
      <button class="login-button" @click="login">Login</button>
      <router-link to="/forget" class="login-forget">忘记密码</router-link>
      <router-link to="/register" style="position: relative;top: 35px;left: 120px;text-decoration: none;">没有账号？马上注册</router-link>
      <div class="login-footer">登录代表你已同意趣多多<span>用户协议</span>和<span>隐私政策</span></div>
    </div>
</template>

<script>
import SIdentify from '../../../common/SIdentify'
import axios from 'axios'

export default {
  name: 'LoginContent',
  components: {
    SIdentify
  },
  data () {
    return {
      identifyCodes: '1234567890',
      identifyCode: '',
      code: '',// text框输入的验证码
      username:'',
      password:'',
      showTishi: false,
      tishi: '',
    }
  },
  methods: {
      // 验证码
      randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
          this.identifyCode = ""
          this.makeCode(this.identifyCodes, 4);
      },
      makeCode(o, l) {
          for (let i = 0; i < l; i++) {
              this.identifyCode += this.identifyCodes[
                  this.randomNum(0, this.identifyCodes.length)
                  ]
          }
          console.log(this.identifyCode);
      },
      login() {
          if (this.code == "") {
              alert("请输入验证码");
              return;
          }
          if (this.identifyCode !== this.code) {
              this.code = '';
              this.refreshCode();
              alert("请输入正确的验证码");
              return;
          } else {
              axios.post('/api/login/login.html', {
                  username: this.username,
                  password: this.password,
              }).then((res) => {
                  res = res.data;
               console.log(res)
                  let user_id = JSON.stringify(res.data['user_id']);
                  this.$session.set('user_id',user_id);

                  if (res.code > 0) {
                      this.$store.state.login=true
                      this.$router.push('/home')
                  } else {
                      this.showTishi = true
                      this.tishi = res.msg
                  }
              }).catch((err) => {
                  console.log(err)
              })
          }
      }
      },
      mounted() {
          this.identifyCode = ""
          this.makeCode(this.identifyCodes, 4)
      },
      created() {
          this.refreshCode()
      }
  }

</script>

<style lang="stylus" scoped>
  .login
    position relative
    width 350px
    height 500px
    text-align center
    border-radius 4px
    background-image url("../../../assets/styles/picture/login.jpg")
    .login-header
      color: #87cefa;
      font-size: 30px;
      margin-top: 27px;
      text-align: center;
      margin-left: 22px;
    .login-input
      position relative
      margin 0 auto
      margin-top 28px
      width 200px
      .login-input-content
        display block
        width 250px
        height 40px
        line-height 40px
        margin 0 auto
        margin-bottom 10px
        outline none
        border 1px solid #888
        border-radius 4px
        padding 10px
        box-sizing border-box
      .iconfont
        position absolute
        left -45px
        padding-top 4px
        font-size 32px
    .login-button
      width 190px
      display block
      text-align center
      margin-left 87px
      margin-top: 40px;
      height 50px
      color #fff
      font-size 26px
      border: none;
      outline: none;
      -webkit-border-radius 13px
      background-color #00a0e9
    .login-code
      margin 0 auto
      width 200px
      .code
        width:150px;
        height:40px;
        border:1px solid rgba(186,186,186,1)
        padding-left: 10px
        margin-left: -39px
        border-radius 4px
      .captcha
        cursor: pointer;
        position: relative;
        right: -115px;
        bottom: 41px;
    .login-footer
      position: relative;
      top: 189px;
      left: 17px;
      color: #808080;
    .login-forget
      margin-right: -290px;
      position: relative;
      bottom: 115px;
      right: -75px;
      text-decoration: none;
    .login-footer span
      color: #4d90fe;
</style>
